<template>
    <app-layout :top_color="getTheme.background">
        <view v-if="is_show && orderDetail" class='order-detail-box'>
            <app-order-banner :confirm="orderDetail.new_status > 1 ? '1' : orderDetail.is_confirm" :title="orderDetail.new_status > 1 ? '已关闭' : orderDetail.status_text" :hint="orderPayTime"></app-order-banner>
            <view v-if="orderDetail.sign != 'vip_card' && orderDetail.sign != 'diy'" :style="{'margin-top': orderPayTime ? '-220rpx' :  '-264rpx'}">
                <view
                    v-if="orderDetail.send_type == 2
                    && ((orderDetail.detailExpress.length == 1 || orderDetail.city_name)
                    && orderDetail.is_send == 1) && orderDetail.sign != 'weekly_buy'">
                    <view class="order-info-box dir-top-nowrap delivery"
                          style="margin-top: -20rpx;border-top: 1rpx solid #e2e2e2"
                          v-if="orderDetail.send_type == 2">
                        <view class="dir-left-nowrap cross-center city-service">
                            <image class="head" src="/static/image/icon/delivery-avatar.png"></image>
                            <template v-if="orderDetail.detailExpress[0].city_name && orderDetail.detailExpress[0].city_mobile">
                                <view class="info-box dir-top-nowrap box-grow-1">
                                    <view class="info">
                                        {{
                                            orderDetail.city_name ? orderDetail.city_name : orderDetail.detailExpress[0].city_name
                                        }}
                                        {{
                                            orderDetail.city_mobile ? orderDetail.city_mobile : orderDetail.detailExpress[0].city_mobile
                                        }}
                                    </view>
                                </view>
                                <view class="icon-box">
                                    <app-jump-button open_type="tel"
                                                     :number="orderDetail.city_mobile ? orderDetail.city_mobile : orderDetail.detailExpress[0].city_mobile">
                                        <image class="icon" src="/static/image/icon/tel.png"></image>
                                    </app-jump-button>
                                </view>
                                <!-- 第三方配送才有地图信息 -->
                                <view v-if="orderDetail.detailExpress[0].send_type == 1" class="icon-box">
                                    <app-jump-button open_type="navigate"
                                                     :url="'/pages/order/city-map/city-map?express_id=' + orderDetail.detailExpress[0].id">
                                        <image class="icon" src="/static/image/icon/shipping-address.png"></image>
                                    </app-jump-button>
                                </view>
                            </template>
                            <template v-else>
                                <view class="await-man">等待分配骑手</view>
                            </template>
                        </view>
                    </view>
                </view>
                <view class='express-box' v-if='sign != "weekly_buy" && orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1 && orderDetail.send_type != 2'>
                    <template v-if="orderDetail.detailExpress[0].send_type == 1">
                        <app-order-express :pageUrl='getPageUrl' :express='orderDetail.detailExpress[0].express'
                                           :express_no='orderDetail.detailExpress[0].express_no'
                                           :merchant_remark='orderDetail.detailExpress[0].merchant_remark'>
                        </app-order-express>
                    </template>
                    <template v-else>
                        物流信息: 其它方式({{ orderDetail.detailExpress[0].express_content }})
                    </template>
                </view>
                <view class='e-box'
                    v-else-if="sign != 'weekly_buy' && (orderDetail.detailExpress.length > 1 || (orderDetail.is_send == 0 && orderDetail.detailExpress.length >= 1))">
                    <app-jump-button :url="getPageUrl">
                        <view style="width: 100%;" class='main-between cross-center'>
                            <view class='dir-top-nowrap box-grow-1 text'>
                                该订单已拆成多个包裹发货，点击查看详情
                            </view>
                            <image class='box-grow-0 img' src='/static/image/icon/arrow-right.png'></image>
                        </view>
                    </app-jump-button>
                </view>
                <view v-if="sign == 'weekly_buy' && orderDetail.plugin_data && orderDetail.plugin_data.extra && orderDetail.plugin_data.extra.weekly_buy && orderDetail.plugin_data.extra.weekly_buy.express_list" class="weekly-send">
                    <view @click="toWeeklySend(item.week_number)" :style="{'color': item.is_send == 0 ? getTheme.color : '#333333'}" class="weekly-send-item main-between cross-top" v-for="(item,index) in orderDetail.plugin_data.extra.weekly_buy.express_list" :key="index">
                        <view class="dir-left-nowrap weekly-send-left" :class="orderDetail.send_type == 2 && item.is_send == 1 ? 'cross-center' : 'cross-top'">
                            <view style="font-weight: 600;flex-shrink: 0">第{{item.week_number}}期：</view>
                            <view style="font-weight: 600" v-if="item.is_send == 0">{{orderDetail.send_type == 1 ? '待核销' : '待发货'}}</view>
                            <view v-else-if="item.is_send == 1 && orderDetail.send_type == 0 && item.express">
                                <view v-if="item.express.express" class="t-omit">快递公司：{{item.express.express}}</view>
                                <view v-if="item.express.express_no" class="t-omit">快递单号：{{item.express.express_no}}</view>
                            </view>
                            <view v-else-if="item.is_send == 1 && orderDetail.send_type == 1 && item.express">
                                <view class="t-omit">已核销</view>
                            </view>
                            <view v-else-if="item.is_send == 1 && orderDetail.send_type == 2 && item.express" class="dir-left-nowrap cross-center">
                                <image class="head" src="/static/image/icon/delivery-avatar.png"></image>
                                <template v-if="item.express.city_name && item.express.city_mobile">
                                    <view class="info-box dir-top-nowrap box-grow-1">
                                        <view class="info">
                                            {{item.express.city_name}}
                                            {{item.express.city_mobile}}
                                        </view>
                                    </view>
                                </template>
                                <template v-else>
                                    <view class="await-man">等待分配骑手</view>
                                </template>
                            </view>
                        </view>
                        <view class="dir-right-nowrap cross-center weekly-send-right" v-if="item.is_send == 0 || orderDetail.send_type == 2 || (item.is_send == 1 && orderDetail.send_type == 0 && item.express && item.express.send_type == 2)">
                            <image class="instructions" src="/static/image/icon/arrow-right.png"></image>
                            <view v-if="item.is_send == 1 && orderDetail.send_type == 2" class="icon-box">
                                <app-jump-button open_type="tel"
                                                 :number="orderDetail.city_mobile ? orderDetail.city_mobile : orderDetail.detailExpress[0].city_mobile">
                                    <image class="icon" :src="orderDetail.city_mobile && orderDetail.city_mobile.length > 0 ? '/static/image/icon/tel.png' :''"></image>
                                </app-jump-button>
                            </view>
                            <view v-else-if="item.is_send == 1 && orderDetail.send_type == 0 && item.express && item.express.send_type == 2">{{item.express.created_at}} 已发货</view>
                            <view v-else-if="item.is_send == 0 && item.is_delay == 0">{{item.send_time}}发货</view>
                            <view v-else-if="item.is_send == 0 && item.is_delay == 4">超时未发货已自动顺延</view>
                            <view v-else>已顺延<text v-if="item.is_delay == 1">，可取消</text></view>
                        </view>
                        <view v-else class="main-center cross-center weekly-send-arrow">
                            <image class="instructions" src="/static/image/icon/arrow-right.png"></image>
                        </view>
                    </view>
                </view>
                <!-- 收发货信息 -->
                <view class="order-detail-area address" :style="orderDetail.sign != 'weekly_buy' && orderDetail.status_text == '待发货'">
                    <view class="user dir-left-wrap">
                        <image v-if="orderDetail.send_type == 1 && orderDetail.goods_type === 'goods'" src="/static/image/icon/shop-address.png"></image>
                        <image v-else src="/static/image/icon/address.png"></image>
                        <view class="user-info" v-if="orderDetail.send_type == 1 && (orderDetail.goods_type === 'goods' || orderDetail.goods_type === 'form-goods')">
                            <view class="order-detail-label main-between cross-center">
                                <view style="width: 80%;">{{orderDetail.store.name}}</view>
                                <view @click="navigation(orderDetail.store)" class="navi main-center cross-center">
                                    <image src="/static/image/icon/navi.png"></image>
                                    <view>导航</view>
                                </view>
                            </view>
                            <view class="second-text">{{orderDetail.store.address}}</view>
                        </view>
                        <view v-else class="user-info">
                            <view class="order-detail-label">
                                <text>{{orderDetail.name}}</text>
                                <text>{{orderDetail.mobile}}</text>
                            </view>
                            <view v-if="orderDetail.address" class="second-text">{{orderDetail.address}}</view>
                        </view>
                    </view>
                    <view class="user dir-left-nowrap" v-if="orderDetail.delivery_config && orderDetail.delivery_config.explain">
                        <image src="/static/image/icon/remark.png"></image>
                        <view class="second-text">{{orderDetail.delivery_config.explain}}</view>
                    </view>
                    <view class="order-detail-item main-between cross-center" v-if="orderDetail.send_type == 1 && (orderDetail.goods_type === 'goods' || orderDetail.goods_type === 'form-goods')">
                        <view class="order-detail-label">联系电话</view>
                        <view class="second-text">{{orderDetail.store.mobile}}</view>
                    </view>
                    <view class="order-detail-item main-between cross-center" v-if="orderDetail.goods_type === 'ecard' || orderDetail.goods_type === 'scan_code_pay'
                            || (orderDetail.is_send && orderDetail.is_show_send_type == 1)">
                        <view class="order-detail-label">发货方式</view>
                        <view class="second-text">{{orderDetail.send_type_text}}</view>
                    </view>
                    <view class="order-detail-item main-between cross-center" v-if="orderDetail.send_type == 1 && (orderDetail.goods_type === 'goods' || orderDetail.goods_type === 'form-goods')">
                        <view class="order-detail-label">下单信息</view>
                        <view class="second-text">{{orderDetail.name}} {{orderDetail.mobile}}</view>
                    </view>
                </view>
            </view>
            <!-- 周期购信息 -->
            <view class="order-detail-area" v-if="sign == 'weekly_buy' && orderDetail.plugin_data && orderDetail.plugin_data.extra  &&orderDetail.plugin_data.extra.weekly_buy">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">配送周期</view>
                    <view class="dir-right-nowrap cross-center" style="font-size: 26rpx;">
                        <view @click="week_content = orderDetail.plugin_data.extra.weekly_buy.week_content" v-if="orderDetail.plugin_data && orderDetail.plugin_data.extra && orderDetail.plugin_data.extra.weekly_buy &&orderDetail.plugin_data.extra.weekly_buy.week_content != ''" class="question cross-center">
                            <image src="/static/image/icon/gray-question.png"></image>
                        </view>
                        {{orderDetail.plugin_data.extra.weekly_buy.send_week}}
                    </view>
                </view>
                <view class="order-detail-item main-between cross-center">
                    <view class="order-detail-label">配送日期</view>
                    <view class="weekly-buy-time dir-left-nowrap cross-center">
                        <image src="/static/image/icon/clock.png"></image>
                        <view>{{orderDetail.plugin_data.extra.weekly_buy.send_time}}</view>
                    </view>
                </view>
            </view>
            <!-- 电子卡密 -->
            <view class="order-detail-area" v-if="orderDetail.type_data && orderDetail.type_data.ecard && orderDetail.type_data.ecard.length > 0">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">卡密信息</view>
                    <view @click="go_eCard">
                        <text>使用说明</text>
                        <image src="/static/image/icon/arrow-right.png" class="instructions"></image>
                    </view>
                </view>
                <view class="ecard dir-top-wrap" :style="{paddingBottom: ecard.length >= 1 ? '20rpx' : '0'}">
                    <view class="item dir-top-nowrap" v-for="(item, key) in ecard" :key="key">
                        <view style="margin-bottom: 10rpx;">【{{ key + 1 }}】</view>
                        <view class="dir-left-nowrap cross-center">
                            <view class='box-grow-1'>
                                <view class="text" v-for="(n, d) in item" :key="d">{{ n.key }}：{{ n.value }}
                                </view>
                            </view>
                            <view @click='copyTextEcard(item)' class='box-grow-0 detail-btn' size='mini'>复制全部
                            </view>
                        </view>
                    </view>
                    <view @click="ecard = orderDetail.type_data.ecard"
                          class="expand dir-left-nowrap main-center cross-center"
                          v-if="ecard.length === 1 && orderDetail.type_data && orderDetail.type_data.ecard && orderDetail.type_data.ecard.length > 1">
                        <text>点击展开</text>
                        <image src="/static/image/icon/icon-down.png"></image>
                    </view>
                </view>
            </view>
            <!-- 订单信息 -->
            <view :style="{'margin-top' : orderDetail.sign != 'vip_card' && orderDetail.sign != 'diy' ? '20rpx' : orderPayTime ? '-220rpx' : '-264rpx'}" class="order-detail-area">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">订单信息</view>
                </view>
                <view class="order-detail-list dir-top-nowrap">
                    <view class="dir-left-nowrap cross-center">
                        <view class="box-grow-0">订单编号：</view>
                        <view class="box-grow-1">{{ orderDetail.order_no }}</view>
                        <view @click="copyText(orderDetail.order_no)"
                              style="position: absolute;right: 0"
                              class="box-grow-0 detail-btn">复制
                        </view>
                    </view>
                    <view>下单时间：{{ orderDetail.created_at }}</view>
                    <view v-if="orderDetail.pay_type == 1">支付方式：线上支付</view>
                    <view v-if="orderDetail.pay_type == 2">支付方式：货到付款</view>
                    <view v-if="orderDetail.pay_type == 3">支付方式：余额支付</view>
                    <view v-if="orderDetail.pay_type == 4">支付方式：现金</view>
                    <view v-if="orderDetail.pay_type == 5">支付方式：pos机</view>
                    <view v-if="orderDetail.sign == 'exchange'">兑换码：{{orderDetail.exchange_code.code}}</view>
                </view>
            </view>
            <!-- 商品信息 -->
            <view class="order-detail-area">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">商品信息</view>
                </view>
                <view class='preferential-box dir-top-wrap' v-if="orderDetail.sign !== 'advance'">
                    <view v-if="orderDetail.plugin_data.exchange_count == null" class='dir-left-nowrap item'>
                        <view class='box-grow-1'>商品总价</view>
                        <view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
                    </view>
                    <view v-if="orderDetail.plugin_data.exchange_count" class='dir-left-nowrap item'>
                        <view class='box-grow-1'>兑换{{ orderDetail.plugin_data.price_name }}</view>
                        <view class='box-grow-0'>{{ orderDetail.plugin_data.exchange_count }}</view>
                    </view>
                    <view v-if="orderDetail.plugin_data.exchange_count >= 0" class='dir-left-nowrap item'>
                        <view class='box-grow-1'>兑换金额</view>
                        <view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
                    </view>
                    <view class='dir-left-nowrap item' v-if="orderDetail.sign !== 'advance' && (orderDetail.goods_type === 'goods' || orderDetail.goods_type === 'form-goods')">
                        <view class='box-grow-1'>运费</view>
                        <view class='box-grow-0' v-if="orderDetail.sign == 'weekly_buy' && orderDetail.plugin_data && orderDetail.plugin_data.extra && orderDetail.plugin_data.extra.weekly_buy">￥{{weeklyExpress}}<text v-if="orderDetail.plugin_data.extra.weekly_buy.freight_type == 0 && weeklyExpress > 0"><text class="total-text">x</text>{{orderDetail.plugin_data.extra.weekly_buy.origin_week_number}}期</text></view>
                        <view class='box-grow-0' v-else>￥{{ orderDetail.express_price }}</view>
                    </view>
                    <view v-if="orderDetail.member_deduction_price_count > 0  && sign !== 'advance'"
                          class='dir-left-nowrap item'>
                        <view class='box-grow-1'>会员折扣</view>
                        <view class='box-grow-0'>-￥{{ orderDetail.member_deduction_price_count }}</view>
                    </view>
                    <view v-if='orderDetail.integral_deduction_price > 0' class='dir-left-nowrap item'>
                        <view class='box-grow-1'>积分抵扣</view>
                        <view class='box-grow-0'>-￥{{ orderDetail.integral_deduction_price }}</view>
                    </view>
                    <view v-if='orderDetail.coupon_discount_price > 0' class='dir-left-nowrap item'>
                        <view class='box-grow-1'>优惠券抵扣</view>
                        <view class='box-grow-0'>-￥{{ orderDetail.coupon_discount_price }}</view>
                    </view>
                    <!-- 插件额外优惠 -->
                    <view v-if="orderDetail.plugin_data && orderDetail.plugin_data.discount_list && sign !== 'advance'">
                        <view v-for='item in orderDetail.plugin_data.discount_list' :key="item.id"
                              class='dir-left-nowrap item'>
                            <view class='box-grow-1'>{{ item.label }}</view>
                            <view class='box-grow-0' v-if="item.value > 0">-￥{{ item.value }}</view>
                            <view class='box-grow-0' v-if="item.value < 0">+￥{{ -item.value }}</view>
                        </view>
                    </view>
                    <view v-if="orderDetail.full_reduce_price > 0  && sign !== 'advance'" class='dir-left-nowrap item'>
                        <view class='box-grow-1'>满减优惠</view>
                        <view class='box-grow-0'>-￥{{orderDetail.full_reduce_price}}</view>
                    </view>
                    <view v-if="orderDetail.back_price > 0" class='dir-left-nowrap item'>
                        <view class='box-grow-1'>订单改价</view>
                        <view class='box-grow-0' v-if="orderDetail.back_price > 0">-￥{{ orderDetail.back_price }}</view>
                        <view class='box-grow-0' v-if="orderDetail.back_price < 0">+￥{{ -orderDetail.back_price }}</view>
                    </view>
                    <view v-if="orderDetail.remark && (orderDetail.goods_type === 'goods' || orderDetail.goods_type === 'form-goods')" class='dir-top-nowrap item'>
                        <view class='box-grow-1'>买家留言:</view>
                        <view style="word-break: break-all" class='box-grow-0 t-extra-small-color'>{{
                                orderDetail.remark
                            }}
                        </view>
                    </view>
                </view>
                <view class='order-price-box cross-center dir-right-nowrap' v-if="orderDetail.sign !== 'advance'">
                    <view>
                        合计:
                        <span>
                            <text v-if="orderDetail.plugin_data.exchange_count"
                                  class='price'>{{
                                    orderDetail.plugin_data.exchange_count
                                }}{{ orderDetail.plugin_data.price_name }}+</text>
                            <text class='price'>￥{{ orderDetail.total_pay_price }}</text>
                        </span>
                    </view>
                </view>
            </view>
            <!--------------商品信息 end 商品列表---------------->
            <view class="order-detail-area">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">{{orderDetail.platform }}</view>
                </view>
                <view class='goods-box composition' v-if="sign == 'composition'">
                    <view class="composition-item" v-for='(list, idx) in orderDetail.composition_list' :key='idx'>
                        <view class="main-between composition-title">
                            <view class="composition-type" v-if="list.type == 1">固定套餐</view>
                            <view class="composition-type" v-else>搭配套餐</view>
                            <view>套餐总价 ￥{{ list.total_price }}</view>
                        </view>
                        <view class="goods-list" v-for='(item, index) in list.goods_list' :key='index'>
                            <app-order-goods-info :plugin="list.type == 2 ?sign : ''" v-if="list.show || index == 0"
                                                  :type="2"
                                                  style="width:100%;" :goods='item'
                                                  :plugin-data="orderDetail.plugin_data"
                                                  :plugin-index="index"></app-order-goods-info>
                            <block v-if='orderDetail.is_send == 1 && (list.show || index == 0)'>
                                <view class='dir-left-nowrap sale-box'>
                                    <view class='box-grow-1'></view>
                                    <view class='box-grow-0 dir-left-nowrap'>
                                        <!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
                                        <app-jump-button v-if="orderDetail.customization_status == 1"  size='mini'>
                                            <view @click="toForm(orderDetail)" size='mini' class='sale-server detail-btn box-grow-0' style="margin-right: 20rpx">{{orderDetail.btn_name}}</view>
                                        </app-jump-button>
                                        <block
                                            v-if="orderDetail.detail[index].is_show_apply_refund && orderDetail.goods_type !== 'ecard'">
                                            <app-jump-button
                                                :url="`/pages/order/refund/select-refund-type?id=${orderDetail.detail[index].id}&sign=${orderDetail.sign}`">
                                                <view size='mini' class='sale-server detail-btn'>申请售后</view>
                                            </app-jump-button>
                                        </block>
                                        <block v-else-if="orderDetail.detail[index].refund">
                                            <text class='refund-status'>
                                                已申请售后({{ orderDetail.detail[index].refund.status_text }})
                                                <app-jump-button
                                                    arrangement="right"
                                                    :url="`/pages/order/refund-detail/refund-detail?id=${orderDetail.detail[index].refund.id}`">
                                                    <view size='mini' class='sale-server detail-btn'>售后详情</view>
                                                </app-jump-button>
                                            </text>
                                        </block>
                                    </view>
                                </view>
                            </block>
                        </view>
                        <view class="composition-open main-center">
                            <view @click="toggle(idx)" class="composition-btn">
                                <text>{{ list.show ? '点击收起套餐详情' : '点击展开套餐详情' }}</text>
                                <image v-if="!list.show" src="/static/image/icon/icon-down.png"></image>
                                <image v-else src="/static/image/icon/icon-up.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class='goods-box' v-else>
                    <view v-for='(item, index) in orderDetail.detail' :key='index'>
                        <app-jump-button :url="item.goods_info.page_url">
                            <app-order-goods-info style="width:100%;" :goods='item.goods_info'
                                                  :type="1"
                                                  :plugin-data="orderDetail.plugin_data"
                                                  :plugin-index="index"></app-order-goods-info>
                        </app-jump-button>
                        <block v-if='orderDetail.is_send == 1'>
                            <view class='dir-left-nowrap sale-box'>
                                <view class='box-grow-1'></view>
                                <view class='box-grow-0 dir-left-nowrap'>
                                    <!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
                                    <block v-if="item.is_show_apply_refund && orderDetail.goods_type !== 'ecard' && ((sign == 'weekly_buy' && last_week) || sign != 'weekly_buy')">
                                        <app-jump-button
                                            :url="`/pages/order/refund/select-refund-type?id=${item.id}&sign=${orderDetail.sign}`">
                                            <view size='mini' class='sale-server detail-btn'>申请售后</view>
                                        </app-jump-button>
                                    </block>
                                    <block v-else-if="item.refund">
                                        <text style="margin-right: 24rpx"
                                            class='refund-status cross-center box-grow-0'>已申请售后({{ item.refund.status_text }})</text>
                                        <app-jump-button 
                                            arrangement="right"
                                            :url="`/pages/order/refund-detail/refund-detail?id=${orderDetail.detail[index].refund.id}`">
                                            <view size='mini' class='sale-server detail-btn'>售后详情</view>
                                        </app-jump-button>
                                    </block>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>

            <!--其他信息-->
            <view class="order-detail-area" v-if="(orderDetail.sign === 'booking' || orderDetail.sign === 'vip_card') && orderDetail.order_form && orderDetail.order_form.length ">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">其他信息</view>
                </view>
                <view class="order-form order-list">
                    <view v-for="(formItem, k) in orderDetail.order_form" :key="k" class="order-form-box">
                        <view v-if="formItem.key === 'img_upload'" class="dir-top-nowrap">
                            <view class="box-grow-0">{{ formItem.label }}：</view>
                            <view class="dir-left-wrap">
                                <block v-if="Array.isArray(formItem.value)">
                                    <image v-for="(img, l) in formItem.value"
                                           :key="l"
                                           v-if="img"
                                           @click="look(img)"
                                           :src="img"
                                           style="margin-right:16rpx;margin-bottom:16rpx"
                                    ></image>
                                </block>
                                <image v-else-if="formItem.value"
                                       @click="look(formItem.value)"
                                       :src="formItem.value"
                                ></image>
                            </view>
                        </view>
                        <view v-else class="dir-left-nowrap">
                            <view class="box-grow-0">{{ formItem.label ? formItem.label : formItem.key_name }}：</view>
                            <view class="box-grow-1 text">{{ formItem.value ? formItem.value : '' }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-detail-area" v-else-if="orderDetail.sign !== 'teller' && formList && formList.length">
                <view class="order-detail-item no-border main-between cross-center">
                    <view class="order-detail-label">其他信息</view>
                </view>
                <view v-for="(formAll, i) in formList" :key="i" class="order-form order-list">
                    <app-order-goods-info v-if="isShowFormGoods"
                                          v-for="(goods,j) in formAll"
                                          :key="j"
                                          style="width:100%;"
                                          :goods='goods.goods_info'
                                          :plugin-data="orderDetail.plugin_data"
                                          :plugin-index="i"
                    ></app-order-goods-info>
                    <view v-for="(formItem, k) in formAll[0]['form_data']" :key="k" class="order-form-box">
                        <view v-if="formItem.key === 'img_upload'" class="dir-top-nowrap">
                            <view class="box-grow-0">{{ formItem.label }}：</view>
                            <view class="dir-left-wrap">
                                <block v-if="Array.isArray(formItem.value)">
                                    <image v-for="(img, l) in formItem.value"
                                           :key="l"
                                           v-if="img"
                                           @click="look(img)"
                                           :src="img"
                                           style="margin-right:16rpx;margin-bottom:16rpx"
                                    ></image>
                                </block>
                                <image v-else-if="formItem.value"
                                       @click="look(formItem.value)"
                                       :src="formItem.value"
                                ></image>
                            </view>
                        </view>
                        <view v-else class="dir-left-nowrap">
                            <view class="box-grow-0">{{ formItem.label }}：</view>
                            <view class="box-grow-1 text">{{ formItem.value ? formItem.value : '' }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view>

                <block v-if="(orderDetail.is_pay == 1 || orderDetail.pay_type == 2)
                    && orderDetail.is_send == 0
                    && orderDetail.status == 1
                    && orderDetail.detailExpressRelation.length == 0
                    && orderDetail.cancel_status != 1 && ((sign == 'weekly_buy' && last_week) || sign != 'weekly_buy')">
                    <view v-if="orderDetail.sign !='gift'" class='action-box dir-left-nowrap main-right'>
                        <view v-if="orderDetail.customization_status == 1"
                            @click="toForm(orderDetail)" class='box-grow-0 btn' style="margin-right: 20rpx">
                            {{orderDetail.btn_name}}
                        </view>
                        <view  @click='cancel(orderDetail)' class='box-grow-0 btn'>申请退款</view>
                    </view>
                </block>
                <view v-else-if="orderDetail.sign !='gift'" class='action-box dir-left-nowrap main-right'>
                    <view v-if="orderDetail.customization_status == 1"
                          @click="toForm(orderDetail)" class='box-grow-0 btn' style="margin-right: 20rpx">
                        {{orderDetail.btn_name}}
                    </view>
                </view>
                <block v-if="orderDetail.sign == 'diy'">
                    <view class='action-box dir-left-nowrap main-right'>
                        <view @click='toDetail(orderDetail)' class='box-grow-0 btn'>表单详情</view>
                    </view>
                </block>
            </view>
        </view>
        <view v-if="week_content" class="dialog main-center cross-center">
            <view class="dialog-item">
                <view class="dialog-title">确认提示</view>
                <view>{{week_content}}</view>
                <view :style="{'background-color': getTheme.background}" @click="week_content = ''" class="dialog-btn">我知道了</view>
            </view>
        </view>
    </app-layout>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    import appOrderGoodsInfo from "../components/app-order-goods-info.vue";
    import appOrderExpress from "../components/app-order-express.vue";
    import appOrderBanner from "../components/app-order-banner.vue";

    export default {
        components: {
            "app-order-goods-info": appOrderGoodsInfo,
            "app-order-express": appOrderExpress,
            appOrderBanner
        },
        data() {
            return {
                last_week: false,
                week_content: '',
                order_id: null,
                orderDetail: {
                    detailExpressRelation: [],
                    detailExpress: [],
                },
                reset_time: 0,
                is_show: false,
                end_time: -1,
                advance_order: {
                    goods_num: 0
                },
                orderPayTime: '',
                detail: [],
                sign: '',
                ecard: [],
                isShowFormGoods: false,
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
            uni.setNavigationBarColor({
               backgroundColor: e.scrollTop < 10 ? this.getTheme.background : this.top_background_color,
               frontColor: e.scrollTop < 10 ? '#ffffff' : this.top_text_color,
            });
        },
        computed: {
           ...mapState('mallConfig', {
               top_background_color: state => state.navbar.top_background_color,
               top_text_color: state => state.navbar.top_text_color,
           }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            weeklyExpress() {
                let express = this.orderDetail.express_price;
                if(this.orderDetail.sign == 'weekly_buy' && this.orderDetail.plugin_data.extra.weekly_buy.freight_type == 0) {
                    express = (this.orderDetail.express_price / this.orderDetail.plugin_data.extra.weekly_buy.origin_week_number).toFixed(2);
                }
                return express
            },
            formList() {
                const self = this;
                let orderDetail = self.orderDetail.detail;
                let newArr = {};
                let form_ids = [];

                if (orderDetail && orderDetail.length) {
                    for (let goods of orderDetail) {
                        if (goods.form_id == '0') {
                            continue;
                        }
                        if (form_ids.indexOf(goods.form_id) === -1) {
                            form_ids.push(goods.form_id);
                            newArr[goods.form_id] = [goods];
                        } else {
                            newArr[goods.form_id].push(goods);
                        }
                    }
                }
                self.isShowFormGoods = form_ids.length > 1;
                return Object.values(newArr);
            },
            getPageUrl() {
                let orderDetail = this.orderDetail;
                if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
                    let coverPic = '';
                    orderDetail.detail.forEach(function (item, index) {
                        if (index === 0) {
                            coverPic = item.goods_info.pic_url;
                        }
                    });
                    return `/pages/order/express-detail/express-detail?express=${orderDetail.express}&customer_name=${orderDetail.customer_name}&express_no=${orderDetail.express_no}&cover_pic=${coverPic}`
                } else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
                    let express = orderDetail.detailExpress[0].express;
                    let express_no = orderDetail.detailExpress[0].express_no;
                    let customer_name = orderDetail.detailExpress[0].customer_name;
                    let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic;
                    return `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` + customer_name + `&express_no=` + express_no + `&cover_pic=` + cover_pic
                } else if (orderDetail.detailExpress.length >= 1) {
                    return '/pages/order/express-list/express-list?order_id=' + orderDetail.id;
                }
            }
        },
        onHide() {
            clearInterval(this.end_time);
        },
        onUnload() {
            clearInterval(this.end_time);
        },
        methods: {
            look(e) {
                uni.previewImage({
                    current: e, // 当前显示图片的http链接
                    urls: [e] // 需要预览的图片http链接列表
                })
            },
            toggle(index) {
                this.orderDetail.composition_list[index].show = !this.orderDetail.composition_list[index].show;
                this.$forceUpdate();
            },
            getOrderDetail() {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.order.detail,
                    data: {
                        id: self.order_id,
                    }
                }).then(response => {
                    self.$hideLoading();
                    self.is_show = true;
                    if (response.code == 0) {
                        self.orderDetail = response.data.detail;
                        if(self.orderDetail.status_text == '待付款') {
                            self.reset_time = self.orderDetail.rest_auto_cancel_time;
                            self.orderPayTime = '需支付：￥' + self.orderDetail.total_pay_price;
                            if(self.reset_time > 0) {
                                self.end_time = setInterval(function() {
                                    self.getTime();
                                }, 1000)
                            } else {
                                console.log('over')
                                clearInterval(self.end_time);
                            }
                        }
                        self.ecard = [self.orderDetail.type_data.ecard[0]];
                        if (self.sign == 'composition') {
                            for (let i in self.orderDetail.composition_list) {
                                self.orderDetail.composition_list[i].show = false;
                            }
                        }
                        if(self.sign == 'weekly_buy' && self.orderDetail.plugin_data.extra.weekly_buy.now_express) {
                            if(self.orderDetail.plugin_data.extra.weekly_buy.week_number == self.orderDetail.plugin_data.extra.weekly_buy.now_express.week_number && self.orderDetail.plugin_data.extra.weekly_buy.now_express.is_send == 1) {
                                this.last_week = true;
                            }
                            if(self.orderDetail.plugin_data.extra.weekly_buy.now_express.week_number == 1 && self.orderDetail.plugin_data.extra.weekly_buy.now_express.is_send == 0) {
                                this.last_week = true;
                            }
                        }
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            getTime() {
                let that = this;
                let reset_time = that.reset_time  - 1;
                let dd = 0;
                let hh = parseInt(reset_time / 3600);
                if (reset_time > 86400) {
                    dd = parseInt(reset_time / 86400);
                    hh = parseInt((reset_time - 86400 * dd) / 3600);
                }
                let h = reset_time % 3600;
                let mm = parseInt(h / 60);
                let ss = h % 60
                if (hh < 10) {
                    hh = '0' + hh.toString();
                }
                if (mm < 10) {
                    mm = '0' + mm.toString();
                }
                if (ss < 10) {
                    ss = '0' + ss.toString();
                }
                let timeText = dd > 0 ? dd + '天' +hh+'小时'+mm+'分' : hh+'小时'+mm+'分'+ss+'秒';
                that.orderPayTime = '需支付：￥' + that.orderDetail.total_pay_price;
                if(reset_time > 0) {
                    that.orderPayTime +=  '     剩余'+timeText;
                }
                that.reset_time = reset_time;
                if(reset_time < 1) {
                    clearInterval(that.end_time);
                    that.getOrderDetail();
                }
            },
            copyText(orderNo) {
                this.$utils.uniCopy({
                    data: orderNo,
                    success: function () {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'none',
                        })
                    }
                });
            },
            copyTextEcard(item) {
                let str = ``;
                for (let i = 0; i < item.length; i++) {
                    str += `${item[i].key}:${item[i].value}\n`
                }
                this.$utils.uniCopy({
                    data: str,
                    success: function () {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'none',
                        })
                    }
                });
            },
            navigation(store) {
                uni.openLocation({
                    latitude: parseFloat(store.latitude),
                    longitude: parseFloat(store.longitude),
                    name: store.name,
                    address: store.address,
                })
            },
            toWeeklySend(e) {
                uni.navigateTo({
                    url: '/plugins/weekly_buy/send/send?week_number=' + e + '&order_id=' + this.order_id + '&order_no=' + this.orderDetail.order_no + '&admin=0'
                });
            },
            // 取消 | 申请退款
            cancel(e) {
                let self = this;
                uni.navigateTo({
                    url: '/pages/order/refund/order-refund?id=' + e.id
                });
            },
            toDetail(e) {
                uni.navigateTo({
                    url: '/plugins/diy/detail/detail?id=' + e.plugin_data.diy_form_id
                });
            },
            toForm(e){
                console.log(1,e);
                uni.navigateTo({
                    url: '/plugins/diy/detail/detail?order_detail_id=' + e.detail[0].id
                });
            },
            cancelAction(e) {
                let self = this;
                uni.showLoading({title: '取消中'});
                self.$request({
                    url: self.$api.order.cancel,
                    data: {
                        id: e.id
                    }
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        if (self.sign === 'advance') {
                            self.$request({
                                url: self.$api.advance.order_detail,
                                method: 'get',
                                data: {
                                    id: self.order_id,
                                }
                            }).then(response => {
                                self.is_show = true;
                                if (response.code === 0) {
                                    self.orderDetail = response.data.detail;
                                } else {
                                    uni.showModal({
                                        title: '',
                                        content: response.msg,
                                        showCancel: false,
                                    });
                                }
                            })
                        } else {
                            self.getOrderDetail();
                        }
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            mobile: function () {
                uni.makePhoneCall({
                    phoneNumber: this.orderDetail.city.mobile,
                })
            },
            // 电子卡密使用说明
            go_eCard() {
                uni.navigateTo({
                    url: `/pages/rules/index?url=${encodeURIComponent(this.$api.ecard.index)}&key=content&data=${JSON.stringify({
                        order_id: this.orderDetail.id
                    })}`,
                });
            }
        },
        onLoad(options) { this.$commonLoad.onload(options);
            this.order_id = options.id;
            this.sign = options.sign;
        },
        onShow() {
            let self = this;
            let interval = setInterval(function () {
                if (self.sign === 'advance') {
                    self.$request({
                        url: self.$api.advance.order_detail,
                        method: 'get',
                        data: {
                            id: self.order_id,
                        }
                    }).then(response => {
                        self.is_show = true;
                        if (response.code === 0) {
                            self.orderDetail = response.data.detail;
                        } else {
                            uni.showModal({
                                title: '',
                                content: response.msg,
                                showCancel: false,
                            });
                        }
                    })
                } else {
                    self.getOrderDetail();
                }
                clearInterval(interval);
            }, 300);
        }
    }
</script>
<style scoped lang="scss">
.total-text {
    font-size: 20rpx;
    margin: 0 5rpx;
}
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0,0,0,.3);
    .dialog-item {
        width: 560rpx;
        background-color: #fff;
        border-radius: 16rpx;
        margin-top: -160rpx;
        font-size: 30rpx;
        color: #333333;
        padding: 40rpx 0;
        text-align: center;
        .dialog-title {
            font-size: 36rpx;
            font-weight: 600;
            padding-bottom: 38rpx;
        }
        .dialog-btn {
            margin: 40rpx auto 0;
            width: 400rpx;
            height: 80rpx;
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 20rpx;
            font-size: 28rpx;
            font-weight: 600;
        }
    }
}
.order-detail-box {
    font-size: $uni-font-size-general-one;
    color: $uni-general-color-one;
    position: relative;
    width: 100%;
    height: 100%;
    .weekly-send {
        margin: -240rpx 24rpx 0;
        padding: 0 24rpx;
        background-color: #fff;
        border-radius: 16rpx;
        font-size: 28rpx;
        .instructions {
            margin-left: 18rpx;
        }
        .await-man {
            margin-left: #{12rpx};
            font-size: #{28rpx};
            color:#666666;
        }

        .info-box {

            .info-label {
                margin-bottom: #{10rpx};
                color: #999999;
                font-size: #{28rpx};
            }
        }

        .head {
            width: #{50rpx};
            height: #{50rpx};
            margin-right: 20rpx;
        }

        .icon-box {
            padding: 0 #{30rpx};
            height: #{45rpx};
            border-left: #{1rpx} solid #f7f7f7;

            .icon {
                width: #{45rpx};
                height: #{45rpx};
            }
        }
        .weekly-send-item {
            padding: 24rpx 0;
            border-top: 1rpx solid #e2e2e2;
            &:first-of-type {
                border-top: 0;
            }
        }
        .weekly-send-arrow {
            width: 30rpx;
            height: 38rpx;
            flex-shrink: 0;
        }
    }
    .order-detail-area  {
        margin: 20rpx 24rpx 0;
        width: 702rpx;
        border-radius: 16rpx;
        background-color: #fff;
        padding: 0 24rpx;
        color: #333333;
    }
    .order-detail-item {
        height: 88rpx;
        line-height: 88rpx;
        border-top: 1rpx solid #e2e2e2;
        &.no-border {
            border-top: 0;
        }
        .question {
            width: 41rpx;
            height: 52rpx;
            padding: 12rpx;
            padding-right: 0;
            image {
                width: 29rpx;
                height: 28rpx;
            }
        }
    }
    .order-detail-label {
        font-size: 28rpx;
        font-weight: 600;
    }
    .second-text {
        color: #999999;
    }
    .address {
        padding-top: 24rpx;
        .user {
            padding: 0 0 24rpx;
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
            }
            .user-info {
                position: relative;
                width: 90%;
                text:first-of-type {
                    margin-right: 40rpx;
                }
                text {
                    word-break: break-all;
                }
                .second-text {
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    word-break: break-all;
                }
                .navi {
                    position: absolute;
                    top: -24rpx;
                    right: -24rpx;
                    width: 126rpx;
                    height: 81rpx;
                    font-size: 24rpx;
                    color: #FF812D;
                    image {
                        width: 27rpx;
                        height: 27rpx;
                        margin-right: 8rpx;
                    }
                }
            }
        }
    }
    .weekly-buy-time {
        color: #FF812D;
        font-size: 24rpx;
        image {
            width: 22rpx;
            height: 22rpx;
            margin-right: 11rpx;
        }
    }
    .order-detail-list {
        font-size: 28rpx;
        border-top: 1rpx solid #e2e2e2;
        padding: 24rpx 0;
        position: relative;
        >view {
            height: 52rpx;
            line-height: 52rpx;
        }
    }
}

.order-label {
    padding: #{32rpx} #{24rpx};
    font-size: #{30rpx};
    color: #353535;
    font-weight: bold;
    background: #FFFFFF;
    border-bottom: #{2rpx} solid #e2e2e2;
}

.goods-image {
    margin-right: #{20rpx};
    margin-bottom: #{20rpx};
}

.goods-num {
    font-size: #{24rpx};
    color: #999999;
    margin: #{20rpx} 0;
}

.order-form {
    background: #FFFFFF;
    border-top: #{2rpx} solid #e2e2e2;

    .order-form-box {
        padding: #{5rpx} 0;

        span {
        }

        image {
            height: #{174rpx};
            width: #{174rpx};
            display: block;
            margin-top: #{15rpx};
        }
    }

}

.order-list {
    background: #FFFFFF;
    padding: #{32rpx} 0;
    margin-bottom: #{20rpx};

    > view {
        margin-bottom: #{10rpx};
    }

    .text {
        word-wrap: break-word;
    }

    > view:last-child {
        margin-bottom: 0;
    }

    .order-list-btn {
        border: 1#{rpx} solid #bbbbbb;
        border-radius: 30#{rpx};
        padding: 10#{rpx} 30#{rpx};
        display: inline-block;
        margin-left: calc(100vw - #{170rpx});
    }
}

.order-form:last-child {
    border-bottom: none;
}

.express-box {
    background: #fff;
    padding: #{20rpx} #{24rpx};
    border-radius: 16rpx;
    margin: 0 #{24rpx} #{20rpx};
}

.address-box {
    background: #fff;
    padding: 32#{rpx} 24#{rpx};
    margin-bottom: 20#{rpx};

    .address {
        word-wrap: break-word;
    }
}

.address-box .text {
    margin-top: 10#{rpx};
}

.delivery {
    width: 702rpx;
    margin: 0 24rpx 20rpx;
    border-radius: 16rpx;
    .head {
        width: #{50rpx};
        height: #{50rpx};
        display: block;
        margin-right: #{20rpx};
    }

    .delivery-tips {
        font-size: $uni-font-size-weak-one;
        color: $uni-general-color-two;
        margin-bottom: #{16rpx};
    }

    .mr-16 {
        margin-right: #{16rpx};
    }

    .delivery-mobile {
        width: #{96rpx};
        border-left: #{1rpx} solid #e2e2e2;

        .mobile {
            width: #{40rpx};
            height: #{40rpx};
            display: block;
            margin-right: #{16rpx};
        }
    }

    .content {
        width: #{500rpx};
    }
}

.order-info-box {
    background: #fff;
    padding: #{24rpx} #{20rpx};
    margin-bottom: 20#{rpx};
}

.store-info-box {
    background: #fff;
    padding: 32#{rpx} 24#{rpx};
    margin-bottom: 20#{rpx};
}

.preferential-box {
    background: #fff;
    padding: #{20rpx} 0;
    border-bottom: #{2rpx} solid $uni-weak-color-one;
    border-top: #{2rpx} solid $uni-weak-color-one;
}

.preferential-box .item {
    margin: 5#{rpx} 0;
}

.order-price-box {
    height: #{88rpx};
    line-height: 88rpx;
    background: #fff;
    //margin-bottom: 20#{rpx};
}

.goods-box {
    background: #fff;
    padding: #{30rpx} 0;
    margin-bottom: 20#{rpx};
    border-top: 1rpx solid #e2e2e2;
    &.composition {
        padding: 0;
        padding-bottom: #{8rpx};
        margin-bottom: 0;
        background-color: #f7f7f7;
    }

    .composition-item {
        margin-bottom: #{20rpx};
        background-color: #fff;

        .composition-open {
            text-align: center;
            background-color: #fff;
            height: #{84rpx};

            .composition-btn {
                display: inline-block;
                border: #{2rpx} solid #bbbbbb;
                font-size: #{24rpx};
                color: #999999;
                padding: 0 #{24rpx};
                margin: #{12rpx} 0 #{16rpx};
                height: #{56rpx};
                line-height: #{54rpx};
                border-radius: #{28rpx};

                image {
                    width: #{22rpx};
                    height: #{12rpx};
                    margin-left: #{16rpx};
                }
            }
        }

        .goods-list {
            padding: 0 #{24rpx};
        }

        .composition-title {
            height: #{80rpx};
            line-height: #{80rpx};
            padding: 0 #{24rpx};
            font-size: #{28rpx};
            color: #353535;
            margin-bottom: #{24rpx};
            border-bottom: #{2rpx} solid #e2e2e2;

            .composition-type {
                color: #f39800;
            }
        }
    }
}

.goods-box .sale-server {
    margin-top: 20#{rpx};
}

.goods-box .sale-box {
    padding-bottom: 15#{rpx};
}

.goods-box .refund-status {
    margin-top: 15#{rpx};
    color: $uni-important-color-black;
}

.action-box {
    background: #fff;
    padding: 32#{rpx} 24#{rpx};

    .cancel-text {
        font-size: $uni-font-size-import-two;
    }

    .btn {
        border: 1#{rpx} solid #bbbbbb;
        border-radius: 30#{rpx};
        padding: 10#{rpx} 30#{rpx};
    }
}

.detail-btn {
    border: 1#{rpx} solid #bbbbbb;
    border-radius: 30#{rpx};
    padding: 0 #{26rpx};
    height: 52rpx;
    line-height: 52rpx;
}

.e-box {
    width: #{702rpx};
    height: #{100rpx};
    padding: 0 #{24rpx};
    border-radius: 16rpx;
    background: #ffffff;
    margin: 0 #{24rpx} #{20rpx};

    .img {
        width: 12#{rpx};
        height: 24#{rpx};
    }

    .express-name {
        margin-bottom: 15#{rpx};
    }

    .text {
        color: #353535;
        font-size: #{28rpx};
    }
}

.advance {
    width: #{702rpx};
    border-radius: #{16rpx};
    background-color: #f7f7f7;
    padding: #{32rpx 24rpx};

    .title {
        font-size: #{24rpx};
        color: #ff4544;
        margin-bottom: #{15rpx};
    }
}

.item-box {
    border: #{1rpx} solid #c2c2c2;
    padding: #{24rpx};
    border-radius: #{16rpx};
    width: #{702rpx};
}

.ecard {
    border-top: 1rpx solid #e2e2e2;
    background-color: #ffffff;

    .item {
        padding: #{32upx 24upx 0 24upx};

        .text {
            font-size: #{23upx};
            line-height: 1.5;
            padding-left: #{15upx};
            word-break: break-all;
        }
    }

    .expand {
        height: #{70upx};
        margin-top: #{20upx};
        border-top: #{1upx} solid #e2e2e2;

        > image {
            width: #{20upx};
            height: #{12upx};
        }

        > text {
            font-size: #{23upx};
            color: #919191;
        }
    }
}

.instructions {
    width: #{12upx};
    height: #{22upx};
    margin-left: #{18upx};
}

.ecard-info {
    height: #{90upx};
    line-height: #{90upx};
    background-color: #ffffff;
    padding: #{0 22upx};
    margin-bottom: #{13upx};
}

.city-service {
    width: 100%;
    margin-bottom: 10#{rpx};

    .await-man {
        margin-left: #{12rpx};
        font-size: #{28rpx};
        color:#666666;
    }

    .info-box {

        .info-label {
            margin-bottom: #{10rpx};
            color: #999999;
            font-size: #{28rpx};
        }
    }

    .head {
        width: #{50rpx};
        height: #{50rpx};
        margin-right: 20rpx;
    }

    .icon-box {
        padding: 0 #{30rpx};
        border-left: #{1rpx} solid #f7f7f7;

        .icon {
            width: #{45rpx};
            height: #{45rpx};
        }
    }
}
</style>